// 在页面或组件中导入
import validate from 'wechat-validate'

Page({
  // 通过 behaviors 注入 validate 方法
  behaviors: [validate],
  // 定义表单数据的验证规则
  rules: {
    houseId: [{ required: true, message: '请选择到访的房屋' }],
    name: [
      { required: true, message: '访客姓名不能为空' },
      { pattern: /^(?:[\u4e00-\u9fa5·]{2,16})$/, message: '访客姓名只能为中文' },
    ],
    mobile: [
      { required: true, message: '访客手机号不能为空' },
      { pattern: /^1[3-8]\d{9}$/, message: '请填写正确的手机号码' },
    ],
    visitDate: [{ required: true, message: '请选择到访的日期' }],
  },
  data: {
    dateLayerVisible: false,
    houseLayerVisible: false,
    houseList: [], // 房屋列表
    houseId: '', // 房屋 id
    houseInfo: '', // 房屋信息(无需提交后端-用于前端表单渲染)
    name: '', // 访客姓名
    gender: 1, // 访客性别
    mobile: '', // 访客手机号
    currentDate: Date.now(), // 指定 `van-datetime-picker` 组件的起始时间(无需提交后端)
    visitDate: '', // 访问日期(用于提交后端的日期)
  },
  openHouseLayer() {
    this.setData({ houseLayerVisible: true })
  },
  closeHouseLayer() {
    this.setData({ houseLayerVisible: false })
  },
  openDateLayer() {
    this.setData({ dateLayerVisible: true })
  },
  closeDateLayer() {
    this.setData({ dateLayerVisible: false })
  },
  // 提交表单-新增访客
  async goPassport() {
    // 验证码 rules 中定义的全部数据
    const isAllValid = this.validate()
    if (!isAllValid) return
    // 待提交的数据
    const { houseId, name, gender, mobile, visitDate } = this.data
    // 请求接口
    const res = await wx.http.post('/visitor', { houseId, name, gender, mobile, visitDate })
    // 查看通行证，🔴 并传递访客 id
    wx.navigateTo({
      url: `/visitor_pkg/pages/passport/index?id=${res.data.id}`,
    })
  },
  // 页面加载时触发
  onLoad() {
    this.getHouseList()
  },
  // 查询已通过审核的房屋列表 (新增报修 和 新增访客 共用)
  async getHouseList() {
    const res = await wx.http.get('/house')
    this.setData({
      houseList: res.data,
    })
  },
  // 选择房屋
  onSelectHouse(e) {
    // 获取房到的信息数据
    // 页面中渲染
    this.setData({
      houseId: e.detail.id,
      houseInfo: e.detail.name,
    })
  },
  // 选择日期 - 点击确定
  onConfirmDate(e) {
    this.setData({
      visitDate: wx.utils.formatDate(e.detail),
      dateLayerVisible: false,
    })
  },
})
